layui.define(["jquery"], function (exports) {
    "use strict";

    var $ = layui.$;

    var style_str = `.jmMedia {
    width: 100%;
    box-sizing: border-box;
}

.jmMedia li {
    padding: 10px 15px;
    border-bottom: 1px solid #e2e2e2;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.jmMedia li:last-child {
    border: none;
}

.jmMedia li a {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.jmMedia .img {
    width: 42px;
    height: 42px;
    position: relative;
    overflow: hidden;
    min-width: 42px;
}

.jmMedia .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jmMedia i {
    font-size: 17px;
}

.jmMedia .body {
    padding: 0px 10px;
    overflow: hidden;
    width: 100%;
}

.jmMedia .body p {
    font-size: 17px;
}

.jmMedia .body div {
    font-size: 11px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.jmMedia.card {
    padding: 10px;
}`

    $('head').append(`<style>${style_str}</style>`)

    var jmMedia = {
        /**
         * 渲染
         * @param {object} obj 
         */
        render: function (obj) {
            var elem = obj.elem;
            var data = obj.data;
            var html = '';
            $.each(data, function (k, v) {
                var img = "";
                if (typeof v.img !== 'undefined' && v.img != "") {
                    img = `<div class="img"><img src="${v.img}"></div>`;
                }
                var href = "javascript:;";
                if (typeof v.href !== 'undefined' && v.href != "") {
                    href = v.href;
                }
                html += `<li data-id="${v.id}">
                    <a href="${href}">
                        ${img}
                        <div class="body">
                            <p>${v.title}</p>
                            <div>${v.desc}</div>
                        </div>
                        <i class="${v.icon}"></i>
                    </a>
                </li>`;
            });

            var type = "";
            if (typeof obj.type !== 'undefined' && obj.type != "") {
                type = obj.type;
            }

            $(elem).html(`<ul class="jmMedia ${obj.addClass || ''} ${type}">${html}</ul>`);

            $(elem).on("click", "li", function () {
                obj.callback(this);
            });

            return obj;
        },
        /**
         * 追加数据
         * @param {Array} arr 
         */
        addData: function (obj, arr) {
            var data = compareAndMergeArrays(obj.data, arr);
            var html = "";
            $.each(data, function (k, v) {
                var img = "";
                if (typeof v.img !== 'undefined' && v.img != "") {
                    img = `<div class="img"><img src="${v.img}"></div>`;
                }
                var href = "javascript:;";
                if (typeof v.href !== 'undefined' && v.href != "") {
                    href = v.href;
                }
                html += `<li data-id="${v.id}">
                    <a href="${href}">
                        ${img}
                        <div class="body">
                            <p>${v.title}</p>
                            <div>${v.desc}</div>
                        </div>
                        <i class="${v.icon}"></i>
                    </a>
                </li>`;
            });
            $(obj.elem + ">ul").html(html);
        }
    }

    function compareAndMergeArrays(A, B) {
        const result = [];

        A.forEach((itemA) => {
            const foundInB = B.find((itemB) => itemB.id === itemA.id);

            if (foundInB) {
                result.push({ ...itemA, ...foundInB });
            } else {
                result.push(itemA);
            }
        });

        B.forEach((itemB) => {
            const foundInA = A.find((itemA) => itemA.id === itemB.id);

            if (!foundInA) {
                result.push(itemB);
            }
        });

        return result;
    }


    exports('jmMedia', jmMedia); // 输出模块
});  